<template>
  <view v-if="!isMobile">
    <el-input size="large" style="width: 300px;margin-right: 20px" :model-value="newTodo" @input="updateNewTodo" v-bind="$attrs" @keyup.enter="addTodo" placeholder="请输入任务" data-test="todo-input" ></el-input>
  </view>
  <view v-else>
    <van-field
        v-model="mb_input"
        placeholder="请输入任务"
        size="large"
        style="width: 95%; margin-right: 20px; justify-items: center"
        @input="updateNewTodo_mb"
        @confirm="addTodo"
        data-test="todo-input"
        clearable>
      <template #button>
        <van-button icon="plus" type="primary" @click.native="addTodo" />
      </template>
    </van-field>
  </view>
</template>

<script>
import {ref} from "vue";
import {isMobile} from "@/components/isMobile";

export default {
  data(){
    return{
      mb_input : ref('')
    }
  },
  props: ['newTodo'],
  computed:
      {
        isMobile() {
          return isMobile();
        },
      },
  methods: {
    updateNewTodo_mb() {
      // 不需要从事件对象中获取数据，直接使用 v-model 绑定的 mb_input
      // console.log(this.mb_input);
      this.$emit('update:newTodo', this.mb_input);
    },
    updateNewTodo(event) {
      // console.log(event)
      // 更新本地数据
      this.$emit('update:newTodo',event);
    },
    addTodo() {
      // console.log("run")
      if(isMobile())
      {
        this.$emit('add', this.mb_input);
        this.mb_input = ''; // 清空移动端输入框的值
      }
      else
      {
        this.$emit('add');
      }
      // console.log(newTodo);
    }
  }
}
</script>
